<template>
  <div class="blog" ref="blog">
    <TopInner :coverImg="coverImgUrl">
      <div class="blog_class">
        <ul>
          <li>
            <a href="#">#Plugins</a>
          </li>
          <li>
            <a href="#">#Vue</a>
          </li>
          <li>
            <a href="#">#JavaScipt</a>
          </li>
        </ul>
      </div>
      <div class="blog_title">测试博客</div>
      <div class="blog_autograph">skygray</div>
      <div class="blog_detail">
        <div>2022-1-27 17:03</div>
        <div style="margin-left: 8px">
          <i class="iconfont icon-guankan"></i>
          <span style="margin-left: 5px">2000</span>
        </div>
        <div>
          <i class="iconfont icon-pinglun"></i>
          <span style="margin-left: 5px">200</span>
        </div>
      </div>
    </TopInner>
    <BlogContent />
    <BlogCareful />
    <Comment />
  </div>
</template>

<script>
import TopInner from "../components/TopInner.vue";
import BlogContent from "../components/BlogContent.vue";
import BlogCareful from "../components/BlogCareful.vue";
import Comment from "../components/Comment.vue";
export default {
  name: "Blog",
  components: {
    TopInner,
    BlogContent,
    BlogCareful,
    Comment,
  },
  data() {
    return {
      coverImgUrl:
        "http://81.68.226.147:743/images/2022/01/27/innerBackground1.jpg",
    };
  },
  computed: {
    darkSkin() {
      return this.$store.state.darkSkin;
    },
  },
  watch: {
    darkSkin: {
      handler: function (newVal, oldVal) {
        const blog = this.$refs.blog;
        newVal ? blog.classList.add("dark") : blog.classList.remove("dark");
      },
    },
  },
};
</script>

<style scoped>
.blog.dark {
  background-color: #232125;
  color: #858383;
  transition: all 0.8s ease;
}
</style>